<template>
  <swiper :spaceBetween="30" :centeredSlides="true" :autoplay="{
    delay: 2000,
    disableOnInteraction: false,
  }" :pagination="{
  clickable: true
}" :navigation="true" :modules="[Autoplay, Pagination, Navigation]" class="mySwiper">
    <swiper-slide>

      <img
        src="https://ts1.cn.mm.bing.net/th/id/R-C.1eaee1d5cc17ed0c9f55e48f89645920?rik=cXJ6qrFvE3SMrg&riu=http%3a%2f%2fimg3.donews.com%2fuploads%2fimg3%2fimg_pic_1514695213_0.jpeg&ehk=gwB3wVmVQ%2fHAU938RkEy2NWWbWGJ1oaR5tbx1cFkA8k%3d&risl=&pid=ImgRaw&r=0"
        alt="">
    </swiper-slide>
    <swiper-slide>

      <img src="https://pic4.zhimg.com/v2-796977e1829eede31535f13079aa4d2d_r.jpg?source=1940ef5c" alt="">
    </swiper-slide>

    <swiper-slide>Slide 3</swiper-slide>

  </swiper>
</template>
<script setup>

//  第一步 安装   

// npm i swiper


// 第二步  引入 

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue"

// Import Swiper styles
import "swiper/css"

import "swiper/css/pagination"
import "swiper/css/navigation"

// import "./style.css"

// import required modules
import { Autoplay, Pagination, Navigation } from "swiper"


</script>


<style>
.swiper-slide {
  height: 300px;
  width: 600px;

}

img {
  height: 300px;
  width: 600px;
}
</style>
